<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时尚购物广场</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: '微软雅黑', Arial, sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #333;
            padding: 15px;
            color: white;
        }

        .nav-links {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }

        /* 横幅图 */
        .banner {
            background: url('https://via.placeholder.com/1920x400') center/cover;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .banner-text {
            background-color: rgba(0,0,0,0.5);
            color: white;
            padding: 20px;
            text-align: center;
        }

        /* 商品展示 */
        .products {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .product-card {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: center;
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .price {
            color: #e74c3c;
            font-size: 1.2em;
            margin: 10px 0;
        }

        .buy-btn {
            background-color: #3498db;
            color: white;
            padding: 8px 20px;
            border: none;
            cursor: pointer;
        }

        /* 页脚样式 */
        footer {
            background-color: #333;
            color: white;
            padding: 30px;
            margin-top: 50px;
        }

        .footer-content {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .footer-section {
            margin: 10px;
            min-width: 200px;
        }

        @media (max-width: 768px) {
            .nav-links {
                flex-direction: column;
                text-align: center;
            }
            
            .nav-links li {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <ul class="nav-links">
            <li><a href="#home">首页</a></li>
            <li><a href="#clothing">服装</a></li>
            <li><a href="#electronics">电子产品</a></li>
            <li><a href="#cart">购物车</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>

    <!-- 横幅 -->
    <div class="banner">
        <div class="banner-text">
            <h2>夏季大促销</h2>
            <p>全场商品低至5折起</p>
        </div>
    </div>

    <!-- 商品展示 -->
    <main class="products">
        <div class="product-card">
            <img src="https://via.placeholder.com/200" alt="商品1" class="product-image">
            <h3>男士衬衫</h3>
            <p class="price">¥299</p>
            <button class="buy-btn">立即购买</button>
        </div>

        <div class="product-card">
            <img src="https://via.placeholder.com/200" alt="商品2" class="product-image">
            <h3>女士手提包</h3>
            <p class="price">¥599</p>
            <button class="buy-btn">立即购买</button>
        </div>

        <div class="product-card">
            <img src="https://via.placeholder.com/200" alt="商品3" class="product-image">
            <h3>智能手机</h3>
            <p class="price">¥3999</p>
            <button class="buy-btn">立即购买</button>
        </div>

        <div class="product-card">
            <img src="https://via.placeholder.com/200" alt="商品4" class="product-image">
            <h3>运动鞋</h3>
            <p class="price">¥499</p>
            <button class="buy-btn">立即购买</button>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h4>联系我们</h4>
                <p>地址：XX市XX区XX路123号</p>
                <p>电话：400-123-4567</p>
            </div>
            <div class="footer-section">
                <h4>快速链接</h4>
                <p><a href="#">关于我们</a></p>
                <p><a href="#">隐私政策</a></p>
                <p><a href="#">服务条款</a></p>
            </div>
            <div class="footer-section">
                <h4>关注我们</h4>
                <p>微信公众号</p>
                <p>新浪微博</p>
                <p>抖音账号</p>
            </div>
        </div>
    </footer>
</body>
</html>